<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">全景回放</div>
        <div class="close" @click="emit('close')">
          <el-icon><Close /></el-icon>
        </div>
      </div>
      <div class="content">
        <div class="list">
          <div class="txt">高点设备</div>
          <div class="selectBox">
            <el-select
              v-model="state.pm.highCameraId"
              placeholder="请选择"
              @change="getHighCameraIdToDeviceId"
            >
              <el-option
                v-for="item in state.data1"
                :key="item.cameraId"
                :label="item.cameraName"
                :value="item.cameraId"
              />
            </el-select>
          </div>
          <div class="txt">低点设备</div>
          <div class="selectBox">
            <el-select
              v-model="state.pm.lowCameraIds"
              placeholder="请选择（最多3个）"
              multiple
              multiple-limit="3"
              collapse-tags
            >
              <el-option
                v-for="item in state.data2"
                :key="item.deviceId"
                :label="item.deviceName"
                :value="item.deviceId"
              />
            </el-select>
          </div>
          <div class="txt">开始时间</div>
          <div class="selectBox">
            <el-date-picker
              type="datetime"
              v-model="state.pm.beginTime"
              placeholder="选择时间"
            />
          </div>
          <div class="txt">结束时间</div>
          <div class="selectBox">
            <el-date-picker
              type="datetime"
              v-model="state.pm.endTime"
              placeholder="选择时间"
            />
          </div>
          <div class="btns">
            <el-button
              class="cusb3"
              style="width: 180px; height: 50px"
              @click="emit('close')"
              >取消</el-button
            >

            <el-button
              class="cusb2"
              style="width: 180px; height: 50px"
              @click="ok"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  oneData: Object,
});
const emit = defineEmits(["close", "ok"]);
const state = reactive({
  pm: { highCameraId: "", lowCameraIds: [], beginTime: "", endTime: "" },
  data1: [],
  data2: [],
});

const ok = () => {
  if (state.pm.highCameraId == "") {
    ElMessage.error("请选择高点设备");
    return;
  }
  if (state.pm.lowCameraIds.length < 1) {
    ElMessage.error("请选择低点设备");
    return;
  }
  if (state.pm.beginTime == "") {
    ElMessage.error("请选择开始时间");
    return;
  }
  if (state.pm.endTime == "") {
    ElMessage.error("请选择结束时间");
    return;
  }

  let store = useMyStore();
  store.params.backpm = state.pm;
  emit("ok");
};
const getData = () => {
  useApi.post("/dynamicview/ar/highandlows", {}).then((res) => {
    state.data1 = res.data.highList;
  });
};

const getHighCameraIdToDeviceId = (highCameraId) => {
  console.log("highCameraId", highCameraId);
  const deviceId = highCameraId; // 如果需要转换，替换此行代码
  getLowsByHigh(deviceId);
};

const getLowsByHigh = (deviceId) => {
  console.log("deviceId", deviceId);
  useApi
    .post("/dynamicview/ar/getlowsbyhigh", { deviceId: deviceId })
    .then((res) => {
      state.data2 = res.data.lowCameraList;
    })
    .catch((err) => {
      ElMessage.error("获取低点设备失败");
    });
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.cont {
  width: 475px;
}

.dia {
  margin-top: 5px;
  width: 475px;
  flex-direction: column;
  background-image: url("/images/bbg1.png");
  background-size: 100% 99%;
  background-position-y: 103%, 0;
  background-repeat: no-repeat;
  .header {
    width: 475px;
    height: 60px;
    background-image: url("/images/bg031.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .title {
      margin-left: 30px;
      width: 120px;
      font-family: YouSheBiaoTiHei;
      font-size: 28px;
      color: #ffffff;
      line-height: 28px;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .close {
      margin: 50px 20px 0 auto;
      width: 35px;
      height: 35px;
      cursor: pointer;

      .el-icon {
        font-size: 35px;
        margin-right: 30px;
        color: #ffffff;
      }
    }
  }

  .content {
    width: 475px;
    min-height: 200px;
    // background-image: url("/images/bbg1.png");
    // background-size: 100% 13%, 100% 100%;
    // background-position-y: 103%, 0;
    // background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      height: 100%;
      padding: 10px 40px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      // background-image: url("/images/mb1.png");
      // background-size: 100% 100%;
      // background-repeat: no-repeat;

      .txt {
        height: 28px;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 20px;
        color: #ffffff;
        line-height: 28px;
        letter-spacing: 3px;
        text-align: left;
        font-style: normal;
      }
      .selectBox {
        margin: 20px 0;
      }

      .btns {
        margin-top: 20px;
        height: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: YouSheBiaoTiHei;
        font-size: 25px;
        color: #ffffff;
        line-height: 55px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

:deep(.el-select) {
  // width: 380px;

  --el-input-text-color: #a6e2fc;
  .el-select__wrapper {
    background: linear-gradient(180deg, #067cc0 0%, #0068b4 100%);
    box-shadow: inset 0px 0px 20px 0px #005097;
    border: 1px solid;
    border-image: linear-gradient(
        360deg,
        rgba(14, 176, 251, 1),
        rgba(255, 255, 255, 1),
        rgba(135, 204, 255, 1)
      )
      1 1;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
    height: 45px;
    line-height: 45px;
    font-weight: 300;
    font-size: 20px;
    color: #a6e2fc;
    letter-spacing: 3px;
    text-align: left;
    font-style: normal;
  }
  .el-select__placeholder.is-transparent {
    color: #a6e2fc;
    font-weight: 300;
  }
  :deep(.el-select-dropdown) {
    /* 强制覆盖下拉框整体样式 */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* 增强选项样式优先级 */
    .el-select-dropdown__item {
      background: linear-gradient(180deg, #067cc0 0%, #0068b4 100%) !important;
      color: #a6e2fc !important; /* 关键颜色定义 */
      font-size: 20px !important;
      font-weight: 300 !important;
      line-height: 35px !important;
      height: 35px !important;
      padding: 0 20px !important;
    }
  }
}

:deep(.el-date-editor) {
  width: 100%;
  // width: 380px;
  .el-input__wrapper {
    background: linear-gradient(180deg, #067cc0 0%, #0068b4 100%);
    box-shadow: inset 0px 0px 20px 0px #005097;
    border: 1px solid;
    border-image: linear-gradient(
        360deg,
        rgba(14, 176, 251, 1),
        rgba(255, 255, 255, 1),
        rgba(135, 204, 255, 1)
      )
      1 1;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
    height: 45px;
    line-height: 45px;
    font-weight: 300;
    font-size: 20px;
    color: #a6e2fc;
    letter-spacing: 3px;
    text-align: left;
    font-style: normal;

    .el-input__inner {
      color: #a6e2fc;
      font-weight: 300 !important;
      font-size: 20px !important;
    }
  }
}
</style>
